<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!-- Bootstrap CSS -->
    <link href="/js/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <!-- jQuery -->
    <script src="/js/jquery-3.3.1.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="/js/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script>
        $(function(){
            $.getJSON("/user/list",function(data){
                $(data.data.userList).each(function(index,item){
                    var roleName = '';
                    if(item.role.name){
                        roleName = item.role.name;
                    }
                    $("#userTable").append("<tr>" +
                        "<td>"+(index+1)+"</td>" +
                        "<td>"+item.loginName+"</td>" +
                        "<td>"+item.name+"</td>" +
                        "<td>"+item.password+"</td>" +
                        "<td>"+item.phone+"</td>" +
                        "<td>"+roleName+"</td>" +
                        "<td><input type='hidden' name='id' value='"+item.uid+"'>" +
                        "<input type='button' value='修改' class='updateBtn'>&nbsp;"+
                        "<input type='button' value='删除' class='deleteBtn'></td>" +
                        "</tr>"
                    )
                })

                $("#addUser").click(function (){
                    //弹出新增用户的模态窗口
                        $("#addUserModal").modal("show");
                })





            })


        })
    </script>

    <script>
        // 新增用户表单提交
        $("#submitAddUser").click(function(){
            // 获取表单数据
            var formData = $("#addUserForm").serialize();

            // 这里可以添加表单验证和提交逻辑
            console.log('提交新增用户数据:', formData);

            // 模拟提交成功后关闭模态框
            $("#addUserModal").modal("hide");
            alert('用户添加成功！');
        });
    </script>

</head>
<body>
<div>
    登录名:<input type="text" id="searchLoginName" placeholder="请输入登录名">&nbsp;&nbsp;
    姓名:<input type="text" id="searchName" placeholder="请输入姓名">&nbsp;&nbsp;
    手机号:<input type="text" id="searchPhone" placeholder="请输入手机号">&nbsp;&nbsp;
    角色：
    <select id="searchRole">
    </select>
    <input type="button" value="搜索" id="searchBtn"></input>
</div>
<div>
    <input type="button" value="新增用户" id="addUser">
</div>

<table id="userTable">
    <thead>
        <tr>
            <th>用户序号</th>
            <th>登录名</th>
            <th>姓名</th>
            <th>密码</th>
            <th>手机号</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
    </thead>
</table>

 <!-- 新增用户模态框 -->
<div id="addUserModal" class="modal fade">
    <form id="addUserForm">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增用户</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>登录名</label>
                        <input type="text" name="loginName" class="form-control" placeholder="请输入登录名">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" name="name" class="form-control" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" name="password" class="form-control" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="text" name="phone" class="form-control" placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label>角色</label>
                        <select name="roleId" class="form-control">
                            <!-- 这里的角色选项应该通过AJAX动态加载 -->
                            <option value="">请选择角色</option>
                            <option value="1">管理员</option>
                            <option value="2">普通用户</option>
                        </select>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="submitAddUser" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>